<template>
    <CommonDialog :visible="visible" width="550px" @on-close="cancel" title="章节设置">
        <div class="setting-title">开放状态设置</div>
        <el-radio-group v-model="formData.setStatus" class="setting">
            <div class="item">
                <el-radio label="1" size="large" class="srt-el-radio">开放</el-radio>
                <span class="tip">该章节学员可见，可学习</span>
            </div>
            <div class="item">
                <el-radio label="2" size="large" class="srt-el-radio">隐藏</el-radio>
                <span class="tip">该章节学员不可见，且学员已产生的学习数据将不计算成绩</span>
            </div>
        </el-radio-group>
        <div class="dialog-footer">
            <el-button class="srt-el-button srt-el-button--cancel srt-el-button-h36" @click="cancel">取消</el-button>
            <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36" @click="confirm">确定</el-button>
        </div>
    </CommonDialog>
</template>

<script setup>
import CommonDialog from '@/components/common-dialog.vue'
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();

const route = useRoute();

const emit = defineEmits(['update:modelValue', 'refresh-list']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});


const visible = computed({
    get: () => props.modelValue,
    set: val => {
        emit('update:modelValue', val);
    }
})


const formData = ref({
    contentTitle: '',
    pid: 0
})

const oldForm = ref({});

watch(() => props.modelValue, (val) => {
    if (val) {
        formData.value = Object.assign({}, props.form);
    } else {
        formData.value = {};
    }
})


function cancel () {
    emit('update:modelValue', false);
}

function confirm () {
    let params1 = {
        queries: {
            id: formData.value.id
        }
    }
    let params2 = {
        data: {
            bizId: route.params.moocId,
            bizScene: 'mooc',
            contentType: 'catalogue',
            courseId: formData.value.courseId,
            contentId: formData.value.catalogueId
        }
    }
    let params = formData.value.id ? params1 : params2;
    let portalName = formData.value.id ? 'moocCourseSetDelete' : 'moocCourseSetCreate';
    
    if(formData.value.setStatus === props.form.setStatus) { // 不做任何处理
        G_dispatchEvent('toast', { message: '设置成功', type: 'success' });
        cancel();
        return;
    }
    G_transmit(portalName, {
       ...params,
    }).then((res) => {
        G_dispatchEvent('toast', { message: '设置成功', type: 'success' });
        cancel();
        emit('refresh-list', false);
    }).catch((_err) => {
        console.log(_err)
    })
}

</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.setting-title {
    color: var(--srt-main-text-color);
    font-weight: bold;
    margin-top: -10px;
    padding-left: 10px;
}

.setting {
    padding: 0px 10px 30px;
    .item {
        display: flex;
        align-items: center;
        margin-top: 18px;
        :deep(.el-radio) {
            margin-right: 10px;
            height: auto;
        }
        :deep(.el-radio__label) {
            font-weight: 400;
        }
    }

    .tip {
        font-size: 14px;
        color: var(--srt-color-light-gray);
    }
}
</style>